<template>
  <div class="play-container">
    <Tab />
    <div class="video-container clearfix" >
      <div class="tree-wrap">
        <Tree :tree="treeData" :playid="playIds" @preview='preview'></Tree>
      </div>

      <div class="video-wrap" id="videoWrap">
        <Player :screenNum='screenNum' :urls="urls" class="myplayer"></Player>
      </div>
    </div>

  </div>
</template>

<script>
import Tab from '@/components/tab/tab2.vue'
import Tree from '@/components/tree/treeNew.vue'
import { getVideoTree, getVideoInfo  } from '@/api/live/videonew'
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import 'videojs-contrib-hls.js/src/videojs.hlsjs'
import { Loading } from 'element-ui';
import screenfull from 'screenfull'
import Player from "./h5player.vue";


export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadParams: {
        fileName: ''
      },
      posterDialog: false,
      posterUrl: '',
      playerList: ['player0', 'player1', 'player2', 'player3'],
      videoHeight: '',
      flag: true,
      isMonitor: false,
      recommendIndex: '',
      unRecommendItem: {},
      recommendItem: {},
      typeError: false,
      cancelId: '',
      playIds: [],
      contentHeight: 0,
      confirmLoading: false,
      cancelLoading: false,
      dragIndex: -1,
      recommendDialog: false,
      cancelDialog: false,
      activeVideo: -1,
      videoDetail: {},
      typeData: [],
      recommendForm: {},
      chooseTypeItem: {},
      videoData: [
        // {type:'事故',title:'标题1',url:'',hasVideo:false},
        { type: '事故', title: '标题1', url: '', hasVideo: false },
        { type: '事故', title: '标题1', url: '', hasVideo: false },
        { type: '事故', title: '标题1', url: '', hasVideo: false },
        { type: '事故', title: '标题1', url: '', hasVideo: false },
        // {type:'事故',title:'标题1',url:'',hasVideo:true},

        // {type:'事故',title:'标题1',url:''},
      ],
      playerOptions: {
        preload: 'auto',
        // fluid: true,
        objectFit: 'full',
        autoplay: false,
        aspectRatio: "16:13",
        techOrder: ['flash'], // 兼容顺序
        controls: false,
        sources: [{
          type: 'rtmp/mp4',
          src: "rtmp://bd1.scgsdsj.com:41319/live/FBD00CDE998848F19DB8DAD82C95377D000000"
        }]
      },
      recommendData: [],
      rmdTreeData: [],

      treeData: [
        {
          label: '一级 1',
          show: false,
          zindex: 1,
          children: [{
            label: '二级 1-1',
            show: false,
            zindex: 2,
            children: [{
              zindex: 3,
              label: '三级 1-1-1'
            }]
          }]
        },
        {
          label: '一级 2',
          show: false,
          zindex: 1,
          children: [{
            label: '二级 2-1',
            show: false,
            zindex: 2,
            children: [{
              zindex: 3,
              label: '三级 2-1-1'
            }]
          }, {
            zindex: 2,
            label: '二级 2-2',
            show: false,
            children: [{
              zindex: 3,
              label: '三级 2-2-1'
            }]
          }]
        }

      ],
      urls: {
        realplay: "",
      },
      videoStatus: false
    }
  },
  beforeDestroy() {
    this.playerList.map(item => {
      // item.remove()
    })
  },
  destroyed() {
    this.$off()
    this.$destroy()
  },
  watch: {
    screenNum(val) {
      if (val == 4) {
        if (this.videoData.length > 4) {
          this.videoData.splice(3, 5)
        }
        this.videoHeight = (this.contentHeight - 20) / 2
      } else if (val == 9) {
        let arr = [{ hasVideo: false }, { hasVideo: false }, { hasVideo: false }, { hasVideo: false }, { hasVideo: false }]
        let newData = this.videoData.concat(arr)
        this.videoData = newData
        this.videoHeight = (this.contentHeight - 30) / 3
      }
    },
    fullScreen(val) {
      let el = document.getElementById('videoWrap')
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if (typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    cameraId: {
      handler(val) {
        if (val) {
          this.preview(val)
        }
      },
      immediate: true
    }

  },
  components: {
    Tree,
    videoPlayer,
    Tab,
    Player
  },
  mounted() {
    this.contentHeight = document.documentElement.clientHeight - 82
    this.videoHeight = (this.contentHeight - 20) / 2
    this.getVideoTree()
    this.$store.commit('switchScreen', 4)
    let _this = this
    window.onresize = function () {
      if (screenfull.isFullscreen) {
        _this.$store.commit('setFullScreen', true)
      } else {
        _this.$store.commit('setFullScreen', false)
        _this.exitFullScreen()
        _this.videoData.map(item => {
          item.hhh = false
        })
      }
    };
    this.$nextTick(() => {
      this.videoStatus = true
    })
  },
  computed: {
    screenNum() {
      return this.$store.state.screenNum
    },
    cameraId() {
      return this.$store.state.cameraId
    },
    clickItem() {
      return this.$store.state.clickItem
    },
    fullScreen() {
      return this.$store.state.fullScreen
    },
  },
  methods: {
    clearFatherObj(val) {
      // console.log(val)
      this.rmdTreeData = val
    },
    mouseenter() {
      this.show = true
    },
    mouseleave() {
      this.show = false
    },

    videoenter(item, index) {
      if (item.hasVideo) {
        this.activeVideo = index
      }
    },
    // 全屏
    fullScreenHandle(item, index) {
      item.hhh = true
      let el = this.$refs[`videoData${index}`][0]
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if (typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript) {
          wscript.SendKeys("{F11}");
        }
      }

    },
    tttt(item, index) {
      item.hhh = true
      let el = this.$refs[`videoData${index}`][0]
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if (typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    exitFullScreen() {
      var el = document
      var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
        wscript;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
        return;
      }

      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }

    },
    fullEvent(item, index) {
      if (!item.hhh) {
        this.tttt(item, index)
        item.hhh = true
      } else {
        item.hhh = false
        this.exitFullScreen()
      }
    },
    
    // 获取视频树
    getVideoTree() {
      Loading.service()
      getVideoTree().then(res => {
        console.log(res.data)
        this.isMonitor = res.data.body.isMonitor
        if (this.flag) {
          this.treeData = res.data.body.tree
        }
        
        this.flag = false
        Loading.service().close()
        // console.log(this.treeData)
      }).catch(err => {
        Loading.service().close()
      })
    },
    // 视频详情查询
    getVideoInfo(cameraId, index) {
      getVideoInfo({
        cameraId: cameraId,
        protocol: 'wss',
        streamType: 1
      }).then(res => {
        if (res.data.code == 100000) {
          this.urls.realplay = res.data.body.url
          
        }
      })
    },
    // 类型选择
    typeEvent(item) {
      this.typeData.map(item1 => {
        item1.subRcmdCodes.map(item2 => {
          item2.active = false
        })
      })
      item.active = true
      this.recommendForm.rcmdCode = item.rcmdCode
      this.recommendForm.rcmdName = item.rcmdName
      this.typeData = Object.assign([], this.typeData)

    },
    // 推荐视频
    recommendEvent(item, index) {
      // this.posterUrl = item.imageUrl
      this.typeData.map(item1 => {
        if (item1.rcmdCode == item.rcmdCode) {
          item1.active = true
        }
      })
      this.recommendItem = item
      this.recommendDialog = true
      this.recommendForm = item
      this.recommendForm.imageUrl = ''

      this.recommendForm = JSON.parse(JSON.stringify(item));
      this.recommendIndex = index
      this.posterUrl = ''
    },
    
    
    
    close() {
      this.typeError = false
      this.typeData.map(item1 => {
        item1.subRcmdCodes.map(item2 => {
          item2.active = false
        })
      })
    },
    // 拖拽放开事件
    preview(item) {
      // console.log('jkkkkjjj')
      // console.log(item)
      //let index = e.currentTarget.getAttribute('data-idx')
      this.getVideoInfo(this.cameraId, -1)
      //this.clickItem.show = true
      //this.$store.commit('setItem',this.clickItem)

    },
    // 拖拽移动事件
    allowDrop(e) {
      e.preventDefault()
      this.dragIndex = e.currentTarget.getAttribute('data-idx')
    },
    // 做拽进入事件
    dargEnter(e, item) {
      // e.preventDefault()
      if (!item.hasVideo) {
      }
    },
    // 拖拽离开事件
    dargLeave(e, item) {
      // e.preventDefault()
      if (!item.hasVideo) {
        this.dragIndex = -1
        // console.log('leave')
      }
    },
    // 图片上传
    beforeUpload(file) {
      const isLt2M = file.size / 1024 > 1024;
      this.uploadParams.fileName = this.recommendForm.cameraId
      if (isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!');
        return false
      }
    },
    uploadSuccess(res, file) {
      // console.log(res)
      this.recommendForm.imageUrl = ''
      this.recommendForm.imageUrl = res.body.filePath
      this.recommendForm = Object.assign({}, this.recommendForm)
      this.$refs.upload.clearFiles()
      this.posterUrl = res.body.filePath + '?time=' + new Date()
      console.log(this.posterUrl)
      Loading.service().close()
      console.log('success')
    },
    uploadError(response, file, fileList) {
      this.$message.error('上传失败，请重试!');
      Loading.service().close()
    },
    uploadEvent(event) {
      let _this = this

      let file = event.target.files[0]
      console.log(file)
      var reader = new FileReader()
      reader.readAsDataURL(file); //将图片url转换为base64码
      reader.onload = function (e) {
        var newUrl = this.result;

        _this.recommendForm.imageUrl = ''
        _this.recommendForm.imageUrl = newUrl
        _this.recommendForm.imageBase64 = newUrl
        _this.recommendForm = Object.assign({}, _this.recommendForm)

        console.log(newUrl)
        _this.posterUrl = newUrl


      }
      console.log('change')
    },
    // 查看封面图
    showPoster(posterUrl, imageUrl, item) {
      console.log(item)
      // console.log(posterUrl)
      this.posterDialog = true

      function isBase64(str) {
        if (str === '' || str.trim() === '') { return false; }
        try {
          return btoa(atob(str)) == str;
        } catch (err) {
          return false;
        }
      }
      console.log(imageUrl.indexOf('data:image') > -1)

      // this.posterUrl =  posterUrl ? posterUrl + '?time=' + new Date() : imageUrl
      if (imageUrl.indexOf('data:image') > -1) {
        this.posterUrl = imageUrl
      } else {
        this.posterUrl = imageUrl

      }
      console.log(this.baseUrl)
    },
    closePoster() {
      // this.posterUrl = ''
    }
  }
};
</script>

<style  lang="less" >
.play-container {
  position: relative;
  height:100vh;

.video-container {
  background:#F5F5F5;
  
  // position:absolute;
  left:0;
  // top:80px;

  top:60px;
  bottom:0;
  width:100%;
  display:flex;
  box-sizing: border-box;
  padding:20px;
  display:flex;

  .tree-wrap {
    background:#fff;
    overflow-y: auto;
    width: 400px;
    flex-shrink: 0;
    border-radius: 5px;
    padding: 27px 0;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .video-wrap {
    display: flex;
    position: relative;
    align-items: flex-start;
    // overflow: scroll;
    flex: 1;
  }

}
}
</style>
